<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/vue/vue.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/laypage/laypage.js"
	charset="utf-8"></script>
<script type="text/javascript" src="js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
	<div id="app" class="container">
		<form class="form-inline bg-info" role="form">
			查询条件:
			<div class="form-group">
				<label class="sr-only" for="username">用户名称</label> 
				<input type="text" class="form-control" id="username" placeholder="用户名称">
			</div>
			<div class="form-group">
				<label class="sr-only" for="userage">用户年龄</label> 
				<input type="text" class="form-control" id="userage" placeholder="用户年龄">
			</div>
			
			<button type="button" id="findUser" class="btn btn-success">查询用户</button>
			<button type="button" id="addUserBtn" class="btn btn-danger">添加用户</button>			
		</form>
		
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr class="success">
						<td>序号</td>
						<td>用户</td>
						<td>手机</td>
						<td>角色</td>
						<td>邮箱</td>
						<td>操作</td>
					</tr>
				</thead>
				
				<tbody>
					<tr class="active" v-for="(item,index) in result">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.age}}</td>
						<td>{{item.rolename}}</td>
						<td>{{item.email}}</td>
						<td><a href="#" @click="editEvent(item.id)">编辑</a><a href="#" @click="delEvent(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
			<div id="pagenav"></div>
		</div>
	</div>
	
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				result:[]
			}
		});
		
		//查询用户数据
		var getUserPageList=function(curr){
			$.ajax({
				type:"GET",
				//写到这里 
			});
		}
	</script>

</body>
</html>